import { useState, useEffect, useRef } from "react";
import { addEvent, removeEvent } from "@/utils";
import "./index.scss";

export default function Right() {
  const [select, setSelect] = useState(0);
  const [toggle, setToggle] = useState(false);

  const switchRef = useRef();
  useEffect(() => {
    addEvent(document, "click", clickEvent);
    function clickEvent(e) {
      if (!switchRef.current.contains(e.target)) {
        setToggle(false);
      }
    }

    return () => {
      removeEvent(document, "click", clickEvent);
    };
  });

  return (
    <div className="right">
      <span className="button signin">登录</span>
      <span className="button register">注册</span>
      <span
        className="lang-switch"
        ref={switchRef}
        onClick={() => setToggle(true)}
      >
        <i className="iconfont iconicon_yuyan"></i>
        <span>简体中文</span>
        <i className="iconfont icon-arrow-down"></i>

        <div
          className="lang-list"
          style={{ display: toggle ? "block" : "none" }}
        >
          <div
            className={`lang-item ${select === 0 ? "select" : ""}`}
            onClick={() => setSelect(0)}
          >
            简体中文
            {select === 0 && <i className="iconfont icon-ok"></i>}
          </div>
          <div
            className={`lang-item ${select === 1 ? "select" : ""}`}
            onClick={() => setSelect(1)}
          >
            繁體中文
            {select === 1 && <i className="iconfont icon-ok"></i>}
          </div>
        </div>
      </span>
    </div>
  );
}
